<template>
  <div>
    <el-card>
      <p>文章分类：</p>
      <span v-for="item in classlist" :key="item._id">
        <el-tag class="class-tag" :color="randomColor()" @click="getdetailclass(item._id)">{{ item.classname }}</el-tag>
      </span>
      <div style="margin-top: 20px">
        <div v-for="item in article" :key="item._id">
          <div class="home-article" :style="`border-left:6px solid ${randomColor()}`">
            <div class="home-article-title" @click="getDetail(item._id)">{{ item.title }}</div>
            <span style="float:right;">{{ item.created_time }}</span>
            <p style="font-size:18px;">{{ item.synopsis }}</p>
            <div class="home-article-visit">
              <div>
                标签：
                <el-tag :color="randomColor()">{{ item.classId.classname }}</el-tag>
              </div>
              <div>
                <span class="el-icon-view" style="margin-right:10px">{{ item.visited }}</span><span
                  class="el-icon-chat-dot-round">{{ item.accessPulish_count }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="no-article" v-if="article.length == 0">
           <h4>此分类下暂无文章哦~</h4>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classlist:[],
      article:[]
    }
  },
  mounted() {
    this.getClasslist()
    this.getArticlelist()
  },
  methods: {
    randomColor() {
      var colorValue = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f" ];
      var s = "#";
      for (var i = 0; i < 6; i++) {
        s += colorValue[Math.floor(Math.random() * 16)];
      }
      return s;
    },
    getClasslist() {
      this.axios.get('rest/class').then(res => {
        console.log(res)
        this.classlist = res.data.items
      })
    },
    getArticlelist() {
      this.axios.get(`/rest/article/art`).then(res=> {
        this.article = res.data.items
      })
    },
    getdetailclass(id) {
      console.log(id)
      this.axios.get(`/rest/article/class/${id}`).then(res => {
        this.article = res.data.items
      })
    },
    getDetail(id) {
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.class-tag {
  margin:5px;
  cursor: pointer;
}
.home-article {
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-radius: 5px;
  padding: 10px 15px;
  margin-bottom: 20px;

  .home-article-title {
    border-bottom: 1px solid #ccc;
    font-size: 24px;
    padding: 5px;
    margin: 10px 0;
    cursor: pointer;
  }

  .home-article-visit {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 10px;
  }
}
.no-article {
  min-height: 80px;
  text-align: center;
  h4 {
    margin-top: 60px;
  }

}
</style>
